import React, { Component } from 'react'
import { Text, StyleSheet, View, TextInput, ScrollView, TouchableOpacity, Image, Button } from 'react-native'
import NavBar from '../../components/PublicHeader';

export default class notAllowedPerson extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "不给谁看",
      inputPlaceholder: "搜索",

      //不让谁看列表
      personsList: [
        {
          headPortrait: '',
          name: "何某某",
          id: "0",
          select: false
        },
        {
          headPortrait: '',
          name: "周某某",
          id: "1",
          select: false
        },
        {
          headPortrait: '',
          name: "刘某某",
          id: "2",
          select: false
        },
      ],
      flag: false,

      //selectItem_person数组接收被选中对象
      selectItem_person: []
    }
  }

  componentDidMount = () => {
    // console.log(this.state.selectItem),

  }

  //将选中对象的name推进selectItem_person[]
  _selectItemPress(item) {
    if (item.select) {
      this.state.selectItem_person.splice(this.state.selectItem_person.findIndex(function (x) {
        return x === item.id;
      }), 1);
    } else {
      this.state.selectItem_person.push(item.name);
    }
    this.state.personsList[item.id].select = !item.select;
    this.setState({ personsList: this.state.personsList })
  }

  //验证
  _submitPress() {
    alert(`选中了${JSON.stringify(this.state.selectItem_person)}`)
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "white" }}>
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={"#333"}
        />
        <TextInput placeholder={this.state.inputPlaceholder} style={styles.position_search} />

        {/* 遍历好友 */}
        <ScrollView>
          <View style={styles.marlr}>
            {this.state.personsList.map((item, index) => (
              <TouchableOpacity key={index} style={styles.ItemBox} onPress={() => {
                //点击一次push一个
                this._selectItemPress(item)
              }}>
                <View style={styles.ItemBox_left}>
                  <Image source={item.headPortrait} style={styles.headPortrait} />
                  <Text style={styles.name}>
                    {item.name}
                  </Text>
                </View>

                {/* 选中亮绿 */}
                <TouchableOpacity style={item.select ? styles.row_2 : styles.row}>

                </TouchableOpacity>
              </TouchableOpacity>
            ))}
          </View>
        </ScrollView>

        {/* 完成按钮 */}
        <View style={styles.complete_box}>
          <TouchableOpacity
            style={styles.complete_container}
            //向上级传参
            onPress={() => {
              this.props.navigation.goBack();
            }
            }
          >
            <Text style={styles.complete_text}>完成</Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  marlr: {
    marginLeft: 15,
    marginRight: 15,
  },
  ItemBox: {
    flexDirection: 'row',
    justifyContent: "space-between",
    alignItems: "center",
    height: 50,
    marginTop: 20,
    paddingBottom: 10,
    // borderBottomWidth: 1,
    // borderBottomColor: "rgba(0, 0, 0, 0.08)"
  },
  ItemBox_left: {
    flexDirection: 'row',
    justifyContent: "center",
    alignItems: "center"
  },
  headPortrait: {
    width: 50,
    height: 50
  },
  name: {
    fontSize: 17,
    marginLeft: 10,
  },
  row: {
    width: 15,
    height: 15,
    borderWidth: 1,
    borderRadius: 50
  },
  row_2: {
    width: 15,
    height: 15,
    borderWidth: 1,
    borderRadius: 50,
    backgroundColor: "#34C759"
  },
  position_search: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    margin: 15,
    height: 40,
    textAlign: "center",
    backgroundColor: "#f0f0f0"
  },
  comment_sent: {
    display: "flex",
    justifyContent: "center",
    flexDirection: "row",
    alignItems: 'center',
    height: 60,
    width: "100%",
    position: "absolute",
    backgroundColor: "white",
    bottom: 0,
    // backgroundColor: "red"
    // borderTopWidth:1,
    // borderTopColor:"black"
  },
  complete_box: {
    display: "flex",
    justifyContent: "center",
    flexDirection: "row",
    alignItems: 'center',
    height: 60,
    width: "100%",
    position: "absolute",
    backgroundColor: "white",
    bottom: 0,
    // backgroundColor: "red"
    // borderTopWidth:1,
    // borderTopColor:"black"
  },
  complete_container: {
    height: 40,
    width: "90%",
    backgroundColor: "rgba(24, 144, 255, 1)",
    borderRadius: 50,
    display: "flex",
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "center"
  },
  complete_text: {
    color: "white",
    fontSize: 17
  }
})
